<template>
  <a-modal
    :title="title"
    :width="500"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    cancelText="关闭">

    <template slot="footer">
      <a-button key="back" @click="handleCancel">关闭</a-button>
    </template>

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <span class="title">文件名称：
         {{
            typeSource === 'dangerCheck' ? model.fileName : (typeSource === 'dangerTreatment' ? model.afterFileName : model.name)
          }}</span>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item style="margin-left:30%;">
              <a-icon type="eye" :style="{ fontSize: '40px', color: '#85c2ff',marginLeft:'15%' }"/>
              <br>
              <a-button type="primary" icon="eye" size="large" @click="handlePreview" style="margin-top:10%;">预览
              </a-button>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item style="margin-left:30%;">
              <a-icon type="vertical-align-bottom" :style="{ fontSize: '40px', color: '#85c2ff',marginLeft:'15%', }"/>
              <br>
              <a-button style="margin-top:10%;" icon="download" size="large" type="primary"
                        @click="handleDownload">下载
              </a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import moment from 'moment'
import JDate from '@/components/jeecg/JDate'

export default {
  name: 'previewModal',
  components: { JDate },
  data() {
    return {
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 10 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      typeSource: ''
    }
  },
  created() {
  },
  methods: {
    add() {
      this.edit({})
    },
    edit(record, typeSource) {
      this.typeSource = typeSource
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.typeSource = ''
    },
    handleCancel() {
      this.close()
    },
    handlePreview() {
      if (this.typeSource === 'dangerCheck') {
        window.open(window._CONFIG['domianURL'] + '/sys/common/view/' + this.model.filePath)
      } else if (this.typeSource === 'dangerTreatment') {
        window.open(window._CONFIG['domianURL'] + '/sys/common/view/' + this.model.afterFilePath)
      } else {
        window.open(window._CONFIG['domianURL'] + '/sys/common/view/' + this.model.response.message)
      }
    },
    handleDownload() {
      if (this.typeSource === 'dangerCheck') {
        window.open(window._CONFIG['domianURL'] + '/sys/common/download/' + this.model.filePath)
      } else if (this.typeSource === 'dangerTreatment') {
        window.open(window._CONFIG['domianURL'] + '/sys/common/download/' + this.model.afterFilePath)
      } else {
        window.open(window._CONFIG['domianURL'] + '/sys/common/download/' + this.model.response.message)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  margin-top: 1px;
  font-weight: 500;
  text-align: center;
  display: block;
  color: #000;
  font-size: 16px;
  margin-bottom: 20px;
}
</style>